<template>
    <div>
        <!-- 面包屑导航 -->
        <el-breadcrumb separator="/">
        <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 卡片视图 -->
        <el-card>
            <!-- 搜索与添加 -->
            <el-row :gutter="20">
                <el-col :span="8">
                    <el-input placeholder="请输入内容"  class="input-with-select">
                        <el-button slot="append" icon="el-icon-search"></el-button>
                    </el-input>
                </el-col>
                <el-col :span="4">
                    <el-button type="primary">添加用户</el-button>
                </el-col>
            </el-row>
            <!-- 列表显示区 -->
            <el-table :data="Userslist">
                <el-table-column prop="username" label="姓名" width="180" ></el-table-column>
                <el-table-column prop="username" label="邮箱" width="180" ></el-table-column>
                <el-table-column prop="username" label="电话" width="180" ></el-table-column>
                <el-table-column prop="username" label="角色" width="180" ></el-table-column>
            </el-table>
        </el-card>
    </div>
</template>

<script>
export default {
    data(){
        return {
            // 获取用户列表的参数对象
            ArrObj:{
                'query':'',
                'pagenum':1,
                'pagesize':2,
            },
            Userslist:[],
            total:0
        }
    },
    created(){
        this.getUserslist()
    },
    methods: {
        getUserslist(){
            this.$http.get('/user',{ params: this.ArrObj }).then( v => {
                const res = v.data;
                if(res.meta.status !== 200){return this.$msg.error('获取失败');}
                // console.log(res);
                this.Userslist = res.data.users;
                console.log(this.Userslist);
                this.total = res.data.total;
            })
        }
    }
}
</script>
<style Lang="less" scoped>

</style>